<template>
    <div style="width: 100%;height: 100%;background-size: cover;">
        <% if(data.data.length == 0){ %>
        <div style="position: absolute;left: 400px;top: 250px;color: #000000;">暂无数据</div>
        <%}else{%>
        <% for(var i = 0;i< data.data.length;i++){ %>
        <% var item = data.data[i]; %>
        <div name="{{data.name}}" style="border-bottom: 1px solid #aaaaaa;position: absolute;text-align: left;overflow:hidden;font-size: 24px;color: #000;;left: {{item.left}}px;top: {{item.top}}px;width:{{item.width}}px;height:{{item.height}}px;">
            <img src="{{item.cover||"images/demo/"+i+".png"}}" style="position: absolute;left: 8px;top: 8px;width:24.6%;height: 90%;" src="" alt="">
            <div style="position: absolute;left: 24.6%;;top: 10px;width:76%;height: 100%;">
                <div style="margin-left: 19px;margin-top: 23px;width: 95%;overflow: hidden;font-size: 26px;">
                    {{item.title}}
                </div>
                <div style="line-height: 33px;margin-left: 19px;margin-top: 21px;width:95%;height:66px;overflow: hidden;
                                        color: #81878A;font-size: 20px;
                        ">
                    {{item.content}}
                </div>
            </div>
        </div>

        <%}%>
        <%}%>
    </div>
</template>
<script>


    (function (){
        return {
            left:0,
            top:0,
            width:1140,
            height:490,
            name:"whys",//图文
            tpl:"listWithContentAndImgTpl",
            whysPos:Q.getInt("pos"),
            listItem:{
                "row":3,
                "col":1,
                "width":1140,
                "height":162,
                "space_top":0,
                "space_left":0,
                "padding_left":0,
                "padding_top":0
            },
            data:[

            ],
            create:function(){
                if(this.whysPos!=-1 && Q.getDecoded("pos") != "null"){
                    this.page = Q.getInt('page');
                }else{
                    this.page = 0;
                }
                this.fetchListData(1);
            },
            updated:function(){

            },
            fetchListData:function(getFocusFlag){

            },
            overBottom:function(){
                if(this.page<this.totalPage){
                    this.page++
                    this.fetchListData(1)
                }
            },
            overTop:function(){
                if(this.page>0){
                    this.page--;
                    this.fetchListData(1)
                }
            },
            focusChange:function(item,last_item){

                if(last_item){
                    this.itemFocusOut(last_item);
                }
                this.itemFocusOn(item);
            },
            itemFocusOn:function (item) {
                this.show();
                item.dom.style.background="url(images/whys/list-bg.png)";
            },
            itemFocusOut:function (item) {
                item.dom.style.background="";
            }
        };
    })()
</script>